<template>
	<view class="page-content">
		<view class="login-box">
			<u-navbar title="登录" autoBack bgColor="#D9EDD4" fixed safeAreaInsetTop placeholder></u-navbar>
			<view class="content-top">
				<view class="content-title">手机号登录</view>
				<view class="content-text">使用手机号登录更方便！</view>
			</view>
			<view class="content-center">
				<input class="input-text" type="text" v-model="phone" placeholder="请输入手机号">
				<input class="input-text" type="password" v-model="pwd" placeholder="请输入密码">
				<button class="btn" @click="goLogin()">登录</button>
				<view class="forget-new">
					<p>忘记密码</p>
					<span @click="gonavigate('/pages/login/enroll')">新用户注册</span>
				</view>
			</view>
			<view class="content-btm">
				<view class="third-party">第三方账号登陆</view>
				<view class="picture">
					<u-icon size="40" name="weixin-circle-fill"></u-icon>
					<u-icon size="40" name="qq-circle-fill"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				phone:'',
				pwd:'',
			}
		},
		methods:{
			// 跳转页面
			gonavigate(pageUrl) {
				uni.navigateTo({
					//保留当前页面，跳转到应用内的某个页面
					url: pageUrl
				})
			},
			goLogin(){
				uni.request({
					url: "http://localhost:3000/user/login",
					method: "POST",
					data: {
						phone: this.phone,
						password: this.pwd,
					},
					success: (res) => {
						if(res?.data?.code==200){
							this.$u.toast(res?.data?.msg);
							let userId = res?.data?.data?.userId;
							uni.setStorageSync('userId',userId)
							setTimeout(function() {
							  uni.switchTab({
							  	url: "/pages/index/default/default"
							  })
							}, 1000); 
						}
						else{
							this.$u.toast(res?.data?.data?.msg);
						}
					},
					fail:(res) => {
						this.$u.toast(res?.data?.msg)
					}
				})
			}
		}
		
	}
</script>

<style scoped lang="scss">
	.page-content{
		.login-box{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: $uni-spacing-col-lg $uni-spacing-row-lg;
			height: 700px;
			.content-top{
				padding: $uni-spacing-col-lg $uni-spacing-row-sm;
				.content-title{
					font-size: $gs-font-lg;
					color: $uni-text-color;
					padding: $uni-spacing-col-lg 0;
				}
				.content-text{
					font-size: $uni-font-size-base;
					color: $uni-text-color;
				}
			}
			.content-center{
				padding: $uni-spacing-col-lg $uni-spacing-row-lg;
				border-radius: 30rpx;
				background-color: rgba(250, 250, 250, 0.8);
				.input-text{
					color: #939393;
					line-height: 100rpx;
					background-color: $gs-jpBg;
					border-radius: 20rpx;
					margin-left: auto;
					margin-right: auto;
					margin: $gs-spacing-col-lg $uni-spacing-row-lg;
					padding: $uni-spacing-col-lg $uni-spacing-row-lg;
				}
				.btn{
					text-align: center;
					background-color: #acd6ae;
					border-radius: 60rpx;
					padding: $uni-spacing-col-sm $uni-spacing-row-sm;
					margin: $gs-spacing-col-lg $uni-spacing-row-lg;
				}
				.forget-new{
					display: flex;
					align-items: center;
					justify-content: space-around;
					padding: $uni-spacing-col-lg $uni-spacing-row-sm;
				}
			}
			.content-btm{
				padding: $uni-spacing-col-lg $uni-spacing-row-lg;
				.third-party{
					padding: $uni-spacing-col-lg $uni-spacing-row-lg;
					font-size: $uni-font-size-sm;
					color: $uni-text-color-grey;
					text-align: center;
				}
				.picture{
					width:60%;
					display: flex;
					align-items: center;
					justify-content: space-evenly;
					padding: $uni-spacing-col-lg 0;
					margin-left: auto;
					margin-right: auto;
				}
			}
		}
	}
	
</style>